<template>
	<head-nav-bar class="nav-bar">
		<div slot="left" class="left" @click="backClick">
			<i class="iconfont icon-zuojiantou"></i>
		</div>
		<div slot="center" class="center">
			<span 
				v-for="(item,index) in titles"
				:key="item"
				:class="{active:currentIndex==index}"
				@click="itemClick(index)"
				>{{item}}</span>
		</div>
	</head-nav-bar>
</template>

<script>
	import headNavBar from 'components/common/headNavBar/headNavBar'
	export default {
		name:'NavBar',
		components:{
			headNavBar
		},
		props:{
			curIndex:Number
		},
		data(){
			return {
				titles:['商品','参数','评论','推荐'],
				currentIndex:0,
				isActive:true
			}
		},
		methods:{
			backClick(){
				this.$router.push('/home')
			},
			itemClick(index){
				this.currentIndex = index;
				
				this.$emit('navBarClick',index)
			}
		},
		watch:{
			curIndex(){
				this.currentIndex = this.curIndex;
				console.log(this.currentIndex)
			}
		}
		
	}
</script>

<style scoped>
	.nav-bar {
		z-index: 9;
	}
	.left i {
		font-size: 0.8rem;
		padding-left: 10px;
	}
	.left,.center {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color:#fff;
	}
	.center span{
		display: inline-block;
		height: 100%;
		font-size: 16px;
	}
	.active {
		color: red;
	}
</style>
